<!--  -->
<template>
	<div class="lsh-card-box">
		<div class="lsh-card-top">
			<slot name="header">
				<div class="lsh-card-title">{{ title }}</div>
			</slot>
		</div>
		<div class="lsh-card-bottom">
			<div class="lsh-bottom-content">
				<slot></slot>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
withDefaults(
	defineProps<{
		title?: string
	}>(),
	{ title: '' }
)
</script>
<style scoped lang="less">
.lsh-card-box {
	border-radius: 16px;
	background: #fff;
	/* 卡片投影 */
	box-shadow: 0px 0px 8px 0px rgba(0, 101, 255, 0.06);
	display: flex;
	flex-direction: column;
	.lsh-card-top {
		border-bottom: 1px solid #f2f5fa;
		.lsh-card-title {
			padding: 10px 16px;
			color: #0d1014;
			font-size: 15px;
			font-weight: 500;
		}
	}
	.lsh-card-bottom {
		flex: 1;
		overflow: hidden;
		.lsh-bottom-content {
			height: 100%;
			overflow: hidden;
			padding: 13px 16px;
		}
	}
}
</style>
